<template>
  <div>
    <el-dialog
      :title="itemInfo.id ? '编辑消控室' : '新增消控室'"
      :visible.sync="dialogVisible"
      width="1000px"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      append-to-body
    >
      <div class="content">
        <div class="item">
          <div class="title">
            <div class="circle"></div>
            基本信息
          </div>
          <el-form
            :model="addForm"
            :rules="rules"
            ref="refForm"
            class="form"
            label-width="180px"
            inline
            label-position="top"
          >
            <el-form-item size="small" label="消控室名称" prop="name">
              <el-input
                style="width: 460px"
                clearable
                v-model="addForm.name"
                placeholder="请输入"
                maxlength="30"
              ></el-input>
            </el-form-item>

            <el-form-item size="small" label="消控室电话" prop="telephone">
              <el-input
                style="width: 460px"
                oninput="value=value.replace(/[^\d]/g,'')"
                @blur="addForm.telephone = $event.target.value"
                clearable
                v-model="addForm.telephone"
                placeholder="请输入"
                maxlength="25"
              ></el-input>
            </el-form-item>
            <el-form-item
              size="small"
              label="组织机构"
              prop="parentId"
              v-if="!itemInfo.id"
            >
              <TreeSearchAdd
                v-if="!itemInfo.id"
                style="width: 460px"
                @changeOrgId="changeOrgId"
                :clearable="false"
                :type="user.roleName == 'UNIT_ADMIN' ? '4' : '1,2,3'"
                ref="refTreeSearchAdd"
              >
              </TreeSearchAdd
              ><el-input
                v-else
                disabled
                style="width: 460px"
                v-model="itemInfo.orgName"
                placeholder="组织机构"
              ></el-input>
            </el-form-item>

            <el-form-item size="small" label="联网单位" prop="orgId">
              <el-select
                size="small"
                style="width: 460px"
                v-model="addForm.orgId"
                placeholder="请选择联网单位"
                filterable
                @change="changeunitId"
                :disabled="itemInfo.id"
              >
                <el-option
                  v-for="item in orgList"
                  :label="item.orgName"
                  :value="item.id"
                  :key="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item size="small" label="消控室值班人员" prop="userIds">
              <el-select
                v-model="addForm.userIds"
                placeholder="请选择"
                style="width: 460px"
                filterable
                multiple
                v-loadMore="loadMore"
              >
                <el-option
                  v-for="item in orgUserList"
                  :key="item.userId"
                  :label="item.username"
                  :value="item.userId"
                >
                  <span style="float: left">{{ item.username }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{
                    item.mobile
                  }}</span>
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item size="small" label="消控室地址" prop="address">
              <el-input
                style="width: 460px"
                v-model="addForm.address"
                placeholder="请输入"
                maxlength="50"
                clearable
              >
                <el-button
                  slot="append"
                  icon="el-icon-location"
                  @click="openMap"
                ></el-button>
              </el-input>
            </el-form-item>

            <el-form-item size="small" label="建筑物" prop="buildingId">
              <el-select
                clearable
                filterable
                v-model="addForm.buildingId"
                placeholder="请选择"
                style="width: 460px"
                @change="changeBuild"
                v-loadMore="loadMore2"
              >
                <el-option
                  v-for="item in buildList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
                <div
                  class="div_box"
                  v-loading="loading2"
                  :style="loading2 ? '' : 'display: none;'"
                ></div>
              </el-select>
            </el-form-item>
            <el-form-item
              size="small"
              label="楼层"
              prop="floorId"
              v-if="showFloor"
            >
              <el-select
                clearable
                filterable
                v-model="addForm.floorId"
                placeholder="请选择"
                style="width: 300px"
                @change="changeFloor"
                v-loadMore="loadMore3"
              >
                <el-option
                  v-for="item in floorList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
                <div
                  class="div_box"
                  v-loading="loading3"
                  :style="loading3 ? '' : 'display: none;'"
                ></div>
              </el-select>
            </el-form-item>
            <el-form-item
              size="small"
              label="点位"
              prop="spaceId"
              v-if="showSpace"
            >
              <el-select
                clearable
                filterable
                v-model="addForm.spaceId"
                placeholder="请选择"
                style="width: 300px"
                v-loadMore="loadMore4"
              >
                <el-option
                  v-for="item in spaceList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
                <div
                  class="div_box"
                  v-loading="loading4"
                  :style="loading4 ? '' : 'display: none;'"
                ></div>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="item">
          <div class="title" style="margin-top: 20px">
            <div class="circle"></div>
            关联设备
          </div>
          <Table
            ref="refTable1"
            pageType="normal"
            :orgId="addForm.orgId"
            @submitTable="submitTable"
          />
        </div>
        <div class="item">
          <div class="title" style="margin-top: 30px">
            <div class="circle"></div>
            关联视频监控
          </div>
          <Table
            ref="refTable2"
            pageType="camera"
            :orgId="addForm.orgId"
            @submitTable="submitTable"
          />
        </div>
        <div class="item" v-if="false">
          <div class="title" style="margin: 20px 0">
            <div class="circle"></div>
            自动查岗设置
          </div>
          <div class="item-row" style="display: flex">
            <span style="margin-right: 30px">查岗方式：</span>
            <el-checkbox-group
              v-model="addForm.inspectType"
              @change="inspectTypeChange"
            >
              <el-checkbox :label="1">定时查岗</el-checkbox>
              <!-- :disabled="addForm.inspectType.includes(2)" -->
              <el-checkbox :label="2">随机查岗</el-checkbox>
              <!-- :disabled="addForm.inspectType.includes(1)" -->
            </el-checkbox-group>
          </div>
          <div class="item-row" v-if="addForm.inspectType.includes(1)">
            <span style="margin-right: 30px">定时查岗：</span>
            <span>查岗时间：</span>
            <el-time-picker
              v-model="timeValue"
              value-format="HH:mm"
              :format="'HH:mm'"
              placeholder="请选择"
              size="small"
              @change="timeChange"
              popper-class="date-style"
            >
            </el-time-picker>
            <el-button
              size="small"
              @click="onAddTime"
              v-preventReClick="1000"
              style="margin: 0 10px"
              class="confirm-button"
              >添加</el-button
            >
            <span class="des">每个时间点查岗一次，每天最多设置4次查岗</span>

            <div style="margin: 20px 0 0 100px">
              <el-tag
                v-for="(tag, index) in timeList"
                :key="tag"
                closable
                @close="oncloseTime(index)"
                type="info"
              >
                {{ tag }}
              </el-tag>
            </div>
          </div>
          <div class="item-row" v-if="addForm.inspectType.includes(2)">
            <span style="margin-right: 30px">随机查岗：</span>
            <span>查岗时间：</span>
            <el-input-number
              v-model="numValue"
              :min="1"
              :max="4"
              label="描述文字"
              size="small"
            ></el-input-number>
            <!--    @change="handleChange" -->
            次
            <span class="des"
              >系统会随机选取查岗时间，每个查岗时间查岗一次，每天最多设置4次</span
            >
          </div>
        </div>
      </div>

      <el-dialog
        custom-class="menu-dialog-height"
        width="50%"
        title="选择地区"
        :visible.sync="innerVisible"
        append-to-body
        :close-on-click-modal="false"
      >
        <div class="mapLoc" v-if="isShowMap">
          <iframe
            :src="reqUrl"
            v-if="isShowMap"
            frameborder="0"
            class="iframe"
            seamless
            scrolling="no"
          ></iframe>
        </div>
      </el-dialog>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog" class="cancel-button"
          >取 消</el-button
        >
        <el-button
          size="small"
          @click="submit"
          v-preventReClick="1000"
          class="confirm-button"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  reqFireControlRoomAdd,
  reqOrgUserPage,
  reqFireControlRoomEdit,
  reqFireControlRoomDetail,
  reqSpaceManager,
  reqOrgList,
} from "@api/api.js";
import { validateImei } from "@utils/validate";
import { mapState } from "vuex";
import loadMore from "@mixin/loadMore";
import TreeSearchAdd from "@components/TreeSearchAdd.vue";
import Table from "./Table.vue";
import { smartAddTime } from "@/utils";

export default {
  props: ["itemInfo", "getLocationInfo", "getAddressflag"],
  mixins: [loadMore],
  components: {
    Table,
    TreeSearchAdd,
  },
  data() {
    return {
      dialogVisible: false,

      orgUserList: [],
      loading: false,
      sysInstanceIndex: 1,
      sysInstanceTotalPages: 99,

      showFloor: false,
      showSpace: false,
      buildList: [],
      floorList: [],
      spaceList: [],
      sysInstanceIndex2: 1,
      sysInstanceTotalPages2: 99,
      loading2: false,
      sysInstanceIndex3: 1,
      sysInstanceTotalPages3: 99,
      loading3: false,
      sysInstanceIndex4: 1,
      sysInstanceTotalPages4: 99,
      loading4: false,

      addForm: {
        id: "",
        orgId: "",
        name: "",
        telephone: "",
        userIds: [],
        address: "",
        lon: "",
        lat: "",
        inspectType: [], // 查岗方式（1-定点查岗，2-随机查岗）
        inspectRule: "", // 查岗规则（定点查岗：存储时间段，逗号分隔；随机查岗：存储查岗次数）

        buildingId: "",
        floorId: "",
        spaceId: "",
        parentId: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入消控室名称", trigger: "blur" },
          // { validator: validateImei },
        ],
        address: [
          { required: true, message: "请输入消控室地址", trigger: "blur" },
        ],
        parentId: [
          { required: true, message: "请选择组织机构", trigger: "change" },
        ],
        orgId: [
          { required: true, message: "请选择联网单位", trigger: "change" },
        ],
        telephone: [
          { required: true, message: "请输入消控室电话", trigger: "blur" },
        ],
        userIds: [
          {
            required: true,
            message: "请选择消控室值班人员",
            trigger: "change",
          },
        ],
      },

      deviceList1: [],
      deviceList2: [],

      timeValue: "",
      timeList: [],
      numValue: 4,

      innerVisible: false,
      reqUrl:
        "https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=44FBZ-OVKKP-T23D5-VGHUE-XDXC3-BDF53&referer=精卫安管理系统&policy=1",
      isShowMap: false,
      LocationInfo: true, //判断是否从地图选的经纬度
      orgList: [],
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  watch: {
    dialogVisible(e) {
      if (e) {
        if (this.itemInfo.id) {
          this.setEditData();
        } else {
          this.$nextTick(() => {
            this.$refs.refTreeSearchAdd.getDataList();
          });
        }
      }
    },

    getAddressflag() {
      if (!this.dialogVisible) return;
      this.LocationInfo = true;
      // 省市区地址经纬度
      const { province, city, area, street, address, getLng, getLat } =
        this.getLocationInfo;
      this.addForm.address = `${province}${city}${area}${street}${address}`;
      this.addForm.lon = getLng;
      this.addForm.lat = getLat;

      this.innerVisible = false;
    },
  },

  methods: {
    changeunitId() {
      this.sysInstanceIndex = 1;
      this.addForm.userIds = [];
      this.orgUserList = [];
      this.getOrgUserList();

      this.buildList = this.floorList = this.spaceList = [];
      this.addForm.buildingId =
        this.addForm.floorId =
        this.addForm.spaceId =
          "";
      this.sysInstanceIndex2 = 1;
      this.sysInstanceTotalPages2 = 99;
      this.sysInstanceIndex3 = 1;
      this.sysInstanceTotalPages3 = 99;
      this.sysInstanceIndex4 = 1;
      this.sysInstanceTotalPages4 = 99;
      this.getBuildList();

      this.deviceList1 = [];
      this.deviceList2 = [];
      this.$refs.refTable1.clearData();
      this.$refs.refTable2.clearData();
    },
    // 清空
    handleClear() {
      this.orgName = "";
      this.addForm.orgId = "";
      this.orgList = [];
      this.getOrgList();
      this.sysInstanceIndex = 1;
      this.addForm.userIds = [];
      this.orgUserList = [];
      this.buildList = this.floorList = this.spaceList = [];
      this.addForm.buildingId =
        this.addForm.floorId =
        this.addForm.spaceId =
          "";
      this.sysInstanceIndex2 = 1;
      this.sysInstanceTotalPages2 = 99;
      this.sysInstanceIndex3 = 1;
      this.sysInstanceTotalPages3 = 99;
      this.sysInstanceIndex4 = 1;
      this.sysInstanceTotalPages4 = 99;
      // this.getBuildList();
      this.deviceList1 = [];
      this.deviceList2 = [];
      this.$refs.refTable1.clearData();
      this.$refs.refTable2.clearData();
    },
    // 请求单位列表
    async getOrgList() {
      let { tenantId, userId, roleName } = this.user;
      const res = await reqOrgList({
        tenantId,
        userId,
        roleName,
        orgName: this.orgName,
        parentId: this.addForm.parentId,
        type: "4",
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.orgList = res.data.rows;
    },
    openMap() {
      this.isShowMap = true;
      this.innerVisible = true;
    },
    async setEditData() {
      const { itemInfo } = this;
      this.addForm.id = itemInfo.id;
      this.addForm.name = itemInfo.name;
      this.addForm.address = itemInfo.address;
      this.addForm.orgId = itemInfo.orgId;
      this.addForm.telephone = itemInfo.telephone;
      this.addForm.lon = itemInfo.lon;
      this.addForm.lat = itemInfo.lat;
      this.addForm.inspectType = [itemInfo.inspectType];
      this.addForm.parentId = itemInfo.orgId;
      if (itemInfo.inspectType == 1) {
        this.timeList = itemInfo.inspectRule
          ? itemInfo.inspectRule.split(",")
          : [];
      } else if (itemInfo.inspectType == 2) {
        this.numValue = itemInfo.inspectRule;
      }
      this.getOrgList();
      await this.getOrgUserList();
      this.getFireControlRoomDetail();
    },
    // 获取详情
    async getFireControlRoomDetail() {
      const res = await reqFireControlRoomDetail(this.itemInfo.id);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      const {
        fcrDutyUserRelatedVO,
        frontDeviceRelatedVO,
        buildingId,
        buildingName,
        floorId,
        floorName,
        spaceId,
        spaceName,
      } = res.data.info;

      // 值班人员
      if (fcrDutyUserRelatedVO && fcrDutyUserRelatedVO.length > 0) {
        this.addForm.userIds = fcrDutyUserRelatedVO.map((item) => item.userId);
      }
      // 设备
      if (frontDeviceRelatedVO && frontDeviceRelatedVO.length > 0) {
        frontDeviceRelatedVO.forEach((item) => {
          item.imei = item.deviceCode;
          item.productName = item.deviceName;
          if (
            item.deviceType === "UserTransferDevice" ||
            item.deviceType === "FireAlarmController"
          ) {
            this.deviceList1.push(item);
          } else if (item.deviceType === "Camera") {
            this.deviceList2.push(item);
          }
        });
        this.$refs.refTable1.dataList = this.deviceList1;
        this.$refs.refTable2.dataList = this.deviceList2;
      }

      // 建筑物
      await this.getBuildList();
      if (buildingId) {
        this.addForm.buildingId = buildingId;
        this.showFloor = true;
        await this.getFloorList();
      }
      if (floorId) {
        this.addForm.floorId = floorId;
        this.showSpace = true;
        await this.getSpaceList();
      }
      if (spaceId) {
        this.addForm.spaceId = spaceId;
      }
    },
    changeOrgId(instanceId) {
      this.addForm.parentId = instanceId.id;
      this.handleClear();
      // this.sysInstanceIndex = 1;
      // this.addForm.userIds = [];
      // this.orgUserList = [];
      // this.getOrgUserList();

      // this.buildList = this.floorList = this.spaceList = [];
      // this.addForm.buildingId =
      //   this.addForm.floorId =
      //   this.addForm.spaceId =
      //     "";
      // this.sysInstanceIndex2 = 1;
      // this.sysInstanceTotalPages2 = 99;
      // this.sysInstanceIndex3 = 1;
      // this.sysInstanceTotalPages3 = 99;
      // this.sysInstanceIndex4 = 1;
      // this.sysInstanceTotalPages4 = 99;
      // this.getBuildList();

      // this.deviceList1 = [];
      // this.deviceList2 = [];
      // this.$refs.refTable1.clearData();
      // this.$refs.refTable2.clearData();
    },

    async getOrgUserList() {
      let res = await reqOrgUserPage(this.sysInstanceIndex, 99, {
        orgId: this.addForm.orgId,
        userId: this.user.userId,
        roleName: this.user.roleName,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.sysInstanceTotalPages = res.data.total;
      this.orgUserList = [...this.orgUserList, ...res.data.rows];
    },

    async loadMore() {
      if (this.sysInstanceIndex >= Math.ceil(this.sysInstanceTotalPages / 99))
        return;
      this.sysInstanceIndex++;
      this.loading = true;
      await this.getOrgUserList();
      // 获取列表数据的方法
      this.loading = false;
    },

    async loadMore2() {
      if (this.sysInstanceIndex2 >= Math.ceil(this.sysInstanceTotalPages2 / 99))
        return;
      this.sysInstanceIndex2++;
      this.loading2 = true;
      // 获取列表数据的方法
      await this.getBuildList();
      this.loading2 = false;
    },
    // 获取建筑物列表
    async getBuildList() {
      let res = await reqSpaceManager(this.sysInstanceIndex2, 99, {
        userId: this.user.userId,
        roleName: this.user.roleName,
        orgId: this.addForm.orgId,
        metaCode: 1,
        isStatistics: 0,
        include: 1, //是否包含下级0包含 1不包含
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.sysInstanceTotalPages2 = res.data.total;
      this.buildList = [...this.buildList, ...res.data.rows];
      console.log(" this.buildList ", this.buildList);
    },
    // 选择建筑物
    changeBuild(val) {
      this.showFloor = true;
      this.floorList = [];
      this.spaceList = [];
      this.addForm.floorId = this.addForm.spaceId = "";
      this.sysInstanceIndex3 = 1;
      this.sysInstanceTotalPages3 = 99;
      this.sysInstanceIndex4 = 1;
      this.sysInstanceTotalPages4 = 99;
      if (val) {
        this.getFloorList();
      }
    },

    async loadMore3() {
      if (this.sysInstanceIndex3 >= Math.ceil(this.sysInstanceTotalPages3 / 99))
        return;
      this.sysInstanceIndex3++;
      this.loading3 = true;
      // 获取列表数据的方法
      await this.getFloorList();
      this.loading3 = false;
    },
    // 获取楼层列表
    async getFloorList() {
      let res = await reqSpaceManager(this.sysInstanceIndex3, 99, {
        userId: this.user.userId,
        roleName: this.user.roleName,
        orgId: this.addForm.orgId,
        parentId: this.addForm.buildingId,
        metaCode: 2,
        isStatistics: 0,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.sysInstanceTotalPages3 = res.data.total;
      this.floorList = [...this.floorList, ...res.data.rows];
    },
    // 选择楼层
    changeFloor(val) {
      this.sysInstanceIndex4 = 1;
      this.sysInstanceTotalPages4 = 99;
      this.showSpace = true;
      this.spaceList = [];
      this.addForm.spaceId = "";
      if (val) {
        this.getSpaceList();
      }
    },

    async loadMore4() {
      if (this.sysInstanceIndex4 >= Math.ceil(this.sysInstanceTotalPages4 / 99))
        return;
      this.sysInstanceIndex4++;
      this.loading4 = true;
      // 获取列表数据的方法
      await this.getSpaceList();
      this.loading4 = false;
    },
    // 获取安装点列表
    async getSpaceList() {
      let res = await reqSpaceManager(this.sysInstanceIndex4, 99, {
        userId: this.user.userId,
        roleName: this.user.roleName,
        orgId: this.addForm.orgId,
        parentId: this.addForm.floorId,
        metaCode: 3,
        isStatistics: 0,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.sysInstanceTotalPages4 = res.data.total;
      this.spaceList = [...this.spaceList, ...res.data.rows];
    },

    submitTable(info) {
      if (info.pageType === "normal") {
        this.deviceList1 = info.data;
      } else if (info.pageType === "camera") {
        this.deviceList2 = info.data;
      }
    },

    inspectTypeChange(val) {
      if (val && val.length >= 2) {
        this.addForm.inspectType = [val[val.length - 1]];
      }
    },
    // 查岗时间选择
    timeChange(val) {},

    onAddTime() {
      const { timeValue, timeList } = this;

      if (!timeValue) return this.$modal.notifyWarning("请选择查岗时间");
      if (timeList.length >= 4)
        return this.$modal.notifyWarning("最多设置4个查岗时间");
      if (timeList.includes(timeValue))
        return this.$modal.notifyWarning("该时间点已存在");
      // 时间最少间隔10分钟
      if (timeList.length > 0) {
        const isTenMin = smartAddTime(timeValue, timeList);
        if (!isTenMin) return this.$modal.notifyWarning("时间间隔至少为10分钟");
      }

      this.timeList.push(timeValue);
    },

    oncloseTime(index) {
      this.timeList.splice(index, 1);
    },

    // 点击确定
    submit() {
      this.$refs.refForm.validate(async (valid) => {
        if (!valid) return;
        let {
          id,
          name,
          address,
          orgId,
          telephone,
          userIds,
          inspectType,
          lon,
          lat,
          buildingId,
          floorId,
          spaceId,
        } = this.addForm;
        let inspectRule = "";
        if (inspectType.includes(1)) {
          const { timeList } = this;
          if (!(timeList && timeList.length > 0))
            return this.$modal.notifyWarning("请添加查岗时间");
          inspectRule = timeList.join(",");
          inspectType = 1;
        } else if (inspectType.includes(2)) {
          inspectRule = this.numValue;
          inspectType = 2;
        } else {
          inspectType = "";
        }
        let imeis = [];
        [...this.deviceList1, ...this.deviceList2].map((item) => {
          imeis.push(item.imei);
        });

        if (this.itemInfo.id) {
          // 编辑

          const res = await reqFireControlRoomEdit({
            id,
            tenantId: this.user.tenantId,

            name,
            address,
            lon,
            lat,
            orgId,
            telephone,
            userIds,
            inspectType,
            inspectRule,
            imeis,
            buildingId,
            floorId,
            spaceId,
          });
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          this.$modal.notifySuccess("编辑成功");
        } else {
          // 新增
          const res = await reqFireControlRoomAdd({
            tenantId: this.user.tenantId,

            name,
            address,
            lon,
            lat,
            orgId,
            telephone,
            userIds,
            inspectType,
            inspectRule,
            imeis,
            buildingId,
            floorId,
            spaceId,
          });
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          this.$modal.notifySuccess("新增成功");
        }
        this.$emit("updateDataList");
        this.closeDialog();
      });
    },
    // 点击关闭弹框
    closeDialog() {
      this.$refs.refForm.resetFields();

      this.sysInstanceIndex = 1;
      this.sysInstanceTotalPages = 99;
      this.orgUserList = [];

      this.addForm = {
        id: "",
        name: "",
        address: "",
        lon: "",
        lat: "",
        orgId: "",
        telephone: "",
        userIds: [],
        inspectType: [],
        inspectRule: "",
        buildingId: "",
        floorId: "",
        spaceId: "",
        parentId: "",
      };

      this.timeValue = "";
      this.timeList = [];
      this.numValue = 4;

      this.deviceList1 = [];
      this.deviceList2 = [];
      this.$refs.refTable1.clearData();
      this.$refs.refTable2.clearData();

      this.showFloor = false;
      this.showSpace = false;
      this.buildList = [];
      this.floorList = [];
      this.spaceList = [];
      this.sysInstanceIndex2 = 1;
      this.sysInstanceTotalPages2 = 99;
      this.sysInstanceIndex3 = 1;
      this.sysInstanceTotalPages3 = 99;
      this.sysInstanceIndex4 = 1;
      this.sysInstanceTotalPages4 = 99;

      if (!this.itemInfo.id) {
        this.$refs.refTreeSearchAdd.onclose();
      }

      this.dialogVisible = false;
    },
  },
  deactivated() {
    if (this.$refs.refIchnography != null || this.$refs.refForm != null) {
      this.closeDialog();
    }
    this.innerVisible = false;
  },
};
</script>

<style lang="less" scoped>
@import url("~@views/style/tablePage.less");
@import url("~@views/common.less");

.content {
  .form {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;

    .el-form-item {
      margin: 8px 10px;
    }

    ::v-deep .el-form-item__label {
      line-height: 15px;
    }

    ::v-deep .vue-treeselect {
      line-height: 34px;
      height: 34px;
    }
  }

  .item {
    .title {
      font-size: 16px;
      color: #7367f0;
      font-weight: 600;
      white-space: nowrap;
      margin-bottom: 15px;
      display: flex;
      align-items: center;

      .circle {
        width: 10px;
        height: 10px;
        margin-right: 10px;
        background: #7367f0;
        border-radius: 50%;
        display: inline-block;
      }
    }

    .item-row {
      color: @primaryTxtcolor;
      margin: 12px 0;

      span {
        margin-right: 15px;
      }

      .des {
        color: @primaryThemeTxtColor2;
        font-size: 12px;
        margin-left: 10px;
      }
    }
  }
}

// 下拉框加载结束
::v-deep .el-loading-mask {
  border-radius: 4px;
}

// 单选按钮
::v-deep .el-checkbox {
  color: @primaryThemeTxtColor2;
}

::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #7367f0;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  border-color: #7367f0;
  background: #7367f0;
}

// 取值范围
::v-deep .el-input-number__decrease {
  color: #fff;
  background: #7367f0;
  border-right: 0;
}

::v-deep .el-input-number__increase {
  border-left: 0;
  color: #fff;
  background: #7367f0;
}

// 日期控件颜色
::v-deep .el-range-editor .el-range-input {
  color: @primaryContentTxt !important;
  background-color: transparent;
}

// 时间日期 至
::v-deep .el-range-editor--small .el-range-separator {
  line-height: 26px;
  color: @primaryContentTxt !important;
}

.el-icon-location {
  font-size: 18px !important;
  cursor: pointer;
}

.mapLoc {
  height: 60vh;
  width: 100%;
  overflow-y: hidden;

  .iframe {
    width: 100%;
    height: 100%;
  }
}
</style>
